<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>会员分类</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="../layui/css/layui.css">
  <link rel="stylesheet" href="./css/style.css">

</head>
<body>
  <div class="layui-fluid">   
    <div class="layui-card">
      <div class="layui-form layui-card-header layuiadmin-card-header-auto">
        <div class="layui-form-item">
          <div class="layui-inline">
            <label class="layui-form-label">登录名</label>
            <div class="layui-input-block">
              <input type="text" name="loginname" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label">手机</label>
            <div class="layui-input-block">
              <input type="text" name="telphone" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
          </div>

          <div class="layui-inline">
            <label class="layui-form-label">角色</label>
            <div class="layui-input-block">
              <select name="role">
                <option value="0">管理员</option>
                <option value="1">超级管理员</option>
                <option value="2">纠错员</option>
                <option value="3">采购员</option>
                <option value="4">推销员</option>
                <option value="5">运营人员</option>
                <option value="6">编辑</option>
              </select>
            </div>
          </div>
          <div class="layui-inline">
            <button class="layui-btn layuiadmin-btn-admin" lay-submit lay-filter="LAY-user-back-search">
              <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
            </button>
          </div>
        </div>
      </div>
      
      <div class="layui-card-body">
        <div style="padding: 10px; 0">
          <button class="layui-btn layuiadmin-btn-admin" data-type="batchdel">删除管理</button>
          <button class="layui-btn layuiadmin-btn-admin" data-type="add">添加管理</button>
        </div>
      </div>


  <table class="layui-hide" id="test"  lay-filter="test"></table>
  

      </div>
    </div>     
        
<script src="../layui/layui.js" charset="utf-8"></script>
<script src="./js/common.js" charset="utf-8"></script>

<script>
layui.use(['laydate','table'], function(){
  var $ = layui.jquery;

  var table = layui.table;

  table.render({
    elem: '#test'
    ,title:"会员表"
    ,url:''
    ,cellMinWidth: 80
    ,cols: [[
      {type:'checkbox'}
      ,{field:'id', title: 'ID',width:80, sort: true}
      ,{field:'name', title: '登录名'}
      ,{field:'username', title: '手机'}
      ,{field:'username', title: '邮箱'}
      ,{field:'username', title: '角色'}
      ,{field:'username', title: '加入时间'}
      ,{field:'username', title: '审核状态',align: 'center',templet:function(d){
        if(d.status ===0){
          return ' <button class="layui-btn layui-btn-xs">已审核</button>';
        }
          return ' <button class="layui-btn layui-btn-primary layui-btn-xs">未审核</button>';
      }}
      ,{field:'optons', width:160,title: '操作',templet:function(d){
        if(d.disabled ===0){
          return '<div class="layui-btn-container"><button class="layui-btn layui-btn-sm layui-icon layui-icon-edit layui-btn-normal" data-title="修改管理员" lay-event="edit"> 修改</button><button class="layui-btn layui-btn-sm layui-btn-danger layui-icon layui-icon-delete layui-btn-disabled"> 删除</button></div>';
        }
        return '<div class="layui-btn-container"><button class="layui-btn layui-btn-sm layui-icon layui-icon-edit layui-btn-normal" data-title="修改管理员" lay-event="edit"> 修改</button><button class="layui-btn layui-btn-sm layui-btn-danger layui-icon layui-icon-delete" lay-event="delete"> 删除</button></div>';
      }}
    ]]
    ,page: true
    ,data:[
      {
        id:1,
        name:'admin',
        status:0,
        disabled: 0

      },
      {
        id:2,
      }
    ]
  });

table.on('tool(test)', function(obj){ 
  var data = obj.data; //获得当前行数据
  var layEvent = obj.event; 
  var tr = obj.tr; //获得当前行 tr 的DOM对象

  if(layEvent === 'delete'){ //删除
    layer.confirm('真的删除行么', function(index){
      obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
      layer.close(index);
      //向服务端发送删除指令
    });
  } else if(layEvent === 'edit'){ //编辑
      console.log("编辑代码区");
      var title = $(this).data('title');
      openLayer(title);


    //同步更新缓存对应的值
    obj.update({
      username: '123'
      ,title: 'xxx'
    });
  }
});


  //头工具栏事件
  table.on('toolbar(test)', function(obj){
    var checkStatus = table.checkStatus(obj.config.id);
    if(obj.event == "allDelete"){

      var data = checkStatus.data;
      if(data.length == 0){
        layer.msg('未选中行数！');
      }else{
        console.log("全部删除代码区");
      }
      
    }

  });

    function openLayer(title){
    layer.open({
      type: 2
      ,title: title
      ,content: 'userAdministratorAdd.html'
      ,maxmin: true
      ,area: ['420px', '500px']
      ,btn: ['确定', '取消']
      ,yes: function(index, layero){  
        //提交代码区
        //...
        
        table.reload('test'); //数据刷新
        layer.close(index); //关闭弹层
      }
    }); 
  }



});
</script>

<style>
  .layui-table-cell{height: auto  !important;}
</style>
</body>
</html>